<template>
  <div>
    <el-container>
      <el-header>
        <div style="display: flex; justify-content: space-between">
          <div>
            <h1>毕业设计管理系统</h1>
          </div>
          <div style="margin-top: 20px">
            <el-tag type="success" style="margin-right: 20px">{{
              userStore.user.realName
            }}</el-tag>
            <el-button style="width: 30%" link type="primary" @click="logout">
              <el-icon>
                <SwitchButton />
              </el-icon>
              退出
            </el-button>
          </div>
        </div>
      </el-header>
      <el-container style="height: calc(100vh - 60px)">
        <el-aside>
          <el-menu
            style="width: 10vw; border: 0"
            class="el-menu-vertical-demo"
            :default-active="router.currentRoute.value.fullPath"
            router
          >
            <menu-tree :menu-list="menuList"></menu-tree>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// ----------------------------------导入区---------------------------------
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MenuTree from '@/components/MenuTree.vue'
import { useMenuListStore, useTokenStore, useUserStore } from '@/stores/counter'
import { SwitchButton } from '@element-plus/icons-vue'

// ----------------------------------数据区---------------------------------
const router = useRouter()
const menuListStore = useMenuListStore()
const menuList = menuListStore.menuList
const userStore =useUserStore()
const tokenStore = useTokenStore()
// ----------------------------------方法区---------------------------------
const logout = () => {
  tokenStore.clearToken()
  menuListStore.clearMenuList()
  userStore.clearUser()
  router.push('/login')
}
onMounted(() => {
  //注册一个回调函数,在组件挂载完成后执行
})
</script>

<style scoped></style>
